import { createStore } from 'vuex'

export default createStore({
  state: { // vuex用来存储状态（数据）的方法
    name: '张三',
    age: 16,
    products: []
  },

  getters: { // 相当于一个计算属性 他的数据会缓存 当他依赖的数据发生变化时会重新计算
    fomateAge(state) {
      // console.log('年纪重新计算了');
      return state.age + '岁'
    }
  },

  mutations: { // vuex唯一能够改变state状态的方法
    changeName(state, value) {
      state.name = value
    },

    changeAge(state, value) {
      // console.log(value);
      state.age = value
      console.log(state);
    },

    changeProducts(state, arr) {
      state.products = arr
    }
  },

  actions: { // 异步的操作 但是需要通过提交mutation来修改state中的数据\
    getProducts({commit, state}) {
      // console.log(context);
      setTimeout(() => {
        // commit('changeProducts',  [{name: '黑龙瞎'}, {name: '龙猴'}])
        state.products = [{name: '黑龙瞎'}, {name: '龙猴'}]
      }, 2000);
    }
  },

  modules: { // 模块化的方法
  }
})
